<!--
 * @Description: 
 * @Author: hanyu
 * @Date: 2022-03-02 16:31:02
 * @LastEditTime: 2022-03-30 16:43:59
 * @LastEditors: hanyu
-->
<template>
  <div class='page-box'>
    <div class="page-center">
      <img v-if="$store.state.app.webInfo && $store.state.app.webInfo.website_logo"
        :src="$store.state.app.webInfo.website_logo" class="top-logo" alt="">
      <div class="page-top">
        <div class="top-left">
          <img class="img" src="@/assets/img/hello.png" alt="">
          <div class="img-desc" v-if="$store.state.app.webInfo">{{$store.state.app.webInfo.website_name}}</div>
        </div>
        <div class="top-right flex-center-a">
          <div class="login-box-title">登录账号</div>
          <div class="login-box">
            <div class="input-box account-box flex-a-center">
              账号:
              <input v-model.trim="sendParams.account" type="text" />
            </div>
            <div class="input-box pwd-box flex-a-center">
              密码:
              <input v-model.trim="sendParams.password" type="password" />
            </div>
            <div class="input-box pwd-box flex-a-center">
              手机号:
              <input v-model.trim="sendParams.mobile" type="text" maxlength="11" />
            </div>
            <div class="input-box pwd-box flex-a-center">
              验证码:
              <input class="code-input" v-model.trim="sendParams.captcha" type="text" maxlength="11" />
              <div class="code-btn" v-if="!sec" @click="getCode()">获取验证码</div>
              <div class="code-btn" v-else>{{sec}}s后获取</div>
            </div>
            <div class="login-btn" @click="onLogin">
              登 录
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-bottom flex-center ">
      <div class="line"></div>
      河南观山海文化传播有限公司 版权所属
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
  import {
    loginApi
  } from '@/api/login';
  export default {
    data() {
      //这里存放数据
      return {
        sendParams: {
          account: '',
          password: '',
          captcha: '',
          mobile: ''
        },
        sec: 0,
        intelval:null
      };
    },
    computed: {},
    watch: {},
    // 过滤器
    filters: {},
    onLoad() {

    },
    //方法集合
    methods: {
      // 获取短信验证码
      async getCode() {
        const {
          account,
          password,
          mobile
        } = this.sendParams
        if (!account) {
          this.$Message.warning('请输入账号');
          return
        }
        if (!password) {
          this.$Message.warning('请输入密码');
          return
        }
        if (!mobile) {
          this.$Message.warning('请输入手机号');
          return
        }
        this.$Spin.show();
        try {
          const res = await loginApi.sendSms({
            mobile: this.sendParams.mobile,
            event:'mobilelogin'
          })
          this.$Message.success(res.msg);
          this.sec = 120
          this.intelval = setInterval(() => {
            if (this.sec) {
              this.sec--
            }else{
              clearInterval(this.intelval)
            }
          }, 1000);
        } catch (error) {
          console.log(error);
        }
        this.$Spin.hide();
      },
      //   登录
      async onLogin() {
        const {
          account,
          password,
          mobile,
          captcha
        } = this.sendParams
        if (!account) {
          this.$Message.warning('请输入账号');
          return
        }
        if (!password) {
          this.$Message.warning('请输入密码');
          return
        }
        if (!mobile) {
          this.$Message.warning('请输入手机号');
          return
        }
        if (!captcha) {
          this.$Message.warning('请输入短信验证码');
          return
        }
        this.$Spin.show();
        try {
          const res = await loginApi.login(this.sendParams)
          if (this.intelval) {
            clearInterval(this.intelval)
            this.sec = 0
          }
          this.$store.commit('clearLocalStorage')
          this.$store.commit('setToken', res.data.userinfo.token);
          this.$store.commit('setUserLoginInfo', res.data.userinfo);
          this.$router.push({
            name: 'DataPage'
          })
        } catch (error) {
          console.log(error);
        }
        this.$Spin.hide();
      },
    },
  }
</script>
<style lang='less' scoped>
  .page-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    justify-content: center;
    background: url("../../assets/img/bg-1.png") top center no-repeat;
    background-size: 100% 100%;

    .page-center {
      position: absolute;
      width: 1200px;
      top: 115px;

      .top-logo {
        position: absolute;
        left: 0;
        width: 120px;
        height: 34px;
      }

      .page-top {
        margin-top: 90px;
        height: 510px;
        background: rgba(31, 173, 255, 0.5);
        display: flex;

        .top-left {
          .img {
            width: 469px;
            height: 169px;
            margin: 100px 100px 56px;
          }

          .img-desc {
            font-size: 30px;
            text-align: left;
            margin-left: 106px;
            color: #ffffff;
          }
        }

        .top-right {
          position: absolute;
          right: 0;
          top: 20px;
          width: 400px;
          height: 510px;
          background: #fff;
          right: 54px;

          .login-box-title {
            margin-top: 22px;
            margin-bottom: 32px;
            font-size: 42px;
            color: #0064ef;
          }

          .login-box {
            .input-box {
              height: 58px;
              border: 1px solid #9fa0a0;
              margin: 0 50px;
              border-radius: 9px;
              padding: 20px;
              color: #9fa0a0;
              font-size: 18px;

              input {
                width: 75%;
                padding-left: 5px;
              }

              input.code-input {
                width: 44%;
              }

              .code-btn {
                font-size: 16px;
                cursor: pointer;
              }
            }

            .login-btn {
              margin: 0 50px;
              margin-top: 16px;
              height: 56px;
              line-height: 56px;
              border-radius: 5px;
              background: linear-gradient(90deg, #63c5ff, #4d68ff);
              color: #fff;
              cursor: pointer;
              font-size: 18px;
            }

            .pwd-box {
              margin-top: 20px;
            }
          }
        }
      }
    }

    .page-bottom {
      font-size: 18px;
      color: #fff;
      position: fixed;
      bottom: 5%;
      left: 0;
      right: 0;
      margin: 0 auto;

      .line {
        width: 250px;
        height: 0.5px;
        background: #fff;
        margin: 0 25px;
      }
    }
  }
</style>